<template>
	<h3>奶茶DIY</h3>
	<h4>选择奶茶的基底</h4>
	<div v-for="(base,index) in state.bases" :key="index">
		<input type="radio" name='jd' :value="base.name" v-model="state.selectbase"/>{{base.name}}
	</div>
	<h4>选择奶茶的小料</h4>
	<select v-model="state.selecttopping">
		<option v-for="(topping,index) in state.toppings" :key="index" :value="toppings.name">{{topping.name}}</option>
		</select>
		<button>点击生成</button>
		<p>你选择的奶茶是:{{state.selectbase}}+{{state.selecttoppings}}奶茶</p>
		<p>价格是:</p>
	
</template>

<script setup>
	import { reactive } from 'vue';
	const state=reactive({
		bases:[
			{id:1,name:'厚椰乳',price:3},
			{id:2,name:'水果茶',price:4},
			{id:3,name:'乌龙茶',price:8},
		],
		toppings:[
			{id:1,name:'珍珠',price:3},
			{id:2,name:'芋圆',price:4},
			{id:3,name:'水果',price:8},
		],
		selectbase:null,
		selecttoppings:null,
		tolalprice:0
	})
</script>


<style>
</style>